
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片列表：鼠标移入/移出改变图片透明度</title>
<style>
ul,li{margin:0;padding:0;list-style-type:none;}
#imgList{width:700px;overflow:hidden;zoom:1;border:1px solid #333;margin:0 auto;padding:0 0 10px 10px;}
#imgList li{float:left;width:128px;height:128px;border:1px solid #ccc;margin:10px 10px 0 0;}
#imgList li img{float:left;opacity:0.3;cursor:crosshair;}
#imgList li.acitve img{opacity:1;}
</style>
<script>
window.onload = function ()
{
    let lis = document.querySelectorAll('#imgList li');

    // lis.forEach(function(el){
    //     el.onmouseenter = function(){
    //         this.classList.add('acitve')
    //     }
    //     el.onmouseleave = function(){
    //         this.classList.remove('acitve')
    //     }
    // })
    lis.forEach(function(el){
        el.addEventListener('mouseenter',function(){
            this.classList.add('acitve')
        })
        el.addEventListener('mouseleave',function(){
            this.classList.remove('acitve')
        })
        
    })
}
</script>
</head>
<body>
<ul id="imgList">
    <li><img src="img/1.jpg" /></li>
    <li><img src="img/2.jpg" /></li>
    <li><img src="img/3.jpg" /></li>
    <li><img src="img/4.jpg" /></li>
    <li><img src="img/5.jpg" /></li>
    <li><img src="img/6.jpg" /></li>
    <li><img src="img/7.jpg" /></li>
    <li><img src="img/8.jpg" /></li>
    <li><img src="img/9.jpg" /></li>
    <li><img src="img/10.jpg" /></li>
</ul>
</body>
</html>
